<template>
  <view>
    <uni-card
      title="我的纸条"
      :isFull="true"
      :sub-title="
        new Date(parseInt(data.date)).toLocaleString().replace(/:\d{1,2}$/, ' ')
      "
    >
      <view class="uni-body">
        <view class="mes">
          <view class="wexin">
            微信: <span>{{ data.weixinNumber }}</span>
          </view>
          <view class="inter">
            关于我: <span>{{ data.introduction }} </span></view
          >
          <view class="age">
            年龄: <span>{{ data.age }}</span>
          </view>
          <view class="sex"
            >性别: <span>{{ data.sex == 0 ? "女" : "男" }}</span></view
          >
        </view>

        <div class="imagelist">
          <div class="item" v-for="item in data.imgList" :key="item">
            <image :src="item" mode="scaleToFill" @click="preViewImg" />
          </div>
        </div>
      </view>
      <button type="warn" @click="delet">删除</button>
    </uni-card>

    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog
        type="error"
        cancelText="取消"
        confirmText="确定"
        title="提示"
        content="确定要删除吗"
        @confirm="dialogConfirm"
        @close="dialogClose"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const data = ref([]);
const id = ref("");
const db = uniCloud.database();
onLoad((options) => {
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  id.value = options.id;
  db.collection("blind_box_list")
    .where({ _id: id.value })
    .get()
    .then((result) => {
      console.log(result.result.data[0]);
      data.value = result.result.data[0];
      uni.hideLoading();
    })
    .catch((err) => {
      uni.showToast({
        title: "加载失败, 请检查网络",
        icon: "none",
        mask: true,
      });
    });
});

const alertDialog = ref(null);
const delet = () => {
  alertDialog.value.open();
};

// 对话框点击确认
const dialogConfirm = async () => {
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  const db = uniCloud.database();
  await db
    .collection("blind_box_list")
    .doc(id.value)
    .remove()
    .then(() => {
      uni.showToast({
        title: "删除成功",
        icon: "none",
        mask: true,
      });
      uni.switchTab({
      	url:"/pages/ucenter/ucenter"
      })
    })
    .catch(() => {
      uni.showToast({
        title: "删除失败, 请检查网路",
        icon: "none",
        mask: true,
      });
    });
};

// 对话框点击取消
const dialogClose = () => {
  return;
};

// 图片预览
const preViewImg = () => {
  uni.previewImage({
    urls: data.value.imgList,
    longPressActions: {
      itemList: ["保存图片"],
    },
  });
};
</script>

<style lang="scss" scoped>
.uni-body {
  .imagelist {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item {
      padding: 10rpx;
    }
    image {
      width: 200rpx;
      height: 200rpx;
    }
  }

  .mes {
    span {
      color: black;
    }
  }
}
</style>